<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>npm命令</title>
    <link rel="stylesheet" href="./css/bootstrap.min.css">
    <script src="./js/jquery-3.4.1.min.js"></script>
    <style>
        .container{
            padding-top: 50px;
        }
    </style>
</head>
<body>

    <div class="container">
        <div>

          <div class="panel panel-default">
              <div class="panel-body">
                  <form class="form-inline">
                      <div class="form-group">
                        <label for="exampleInputName2">初始化npm</label>
                        <input  type="text" id="gitInitName" class="form-control" id="exampleInputName2" placeholder="新建仓库名称">
                      </div>


                      <button type="button" onclick="gitInit()" class="btn btn-success">生成Git命令</button>
                    </form>
              </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                          <label for="exampleInputName2">地址</label>
                          <input  type="text" id="gitCloneAddress" class="form-control" id="exampleInputName2" placeholder="地址">
                        </div>
                        <div class="form-group">
                          <label for="exampleInputEmail2">分支</label>
                          <input type="email" id="gitCloneBranch" class="form-control" id="exampleInputEmail2" placeholder="分支名称">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">本地文件夹名(当前文件夹 输入./)</label>
                            <input type="email" id="gitFileName" class="form-control" id="exampleInputEmail2" placeholder="本地文件夹名">
                          </div>
                        <button type="button" onclick="createGitClone()" class="btn btn-success">生成Git命令</button>
                      </form>
                </div>
              </div>

            
            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <button type="button" onclick="showStatus()" class="btn btn-success">查看暂存区</button>
                        </div>
                        
                        <div class="form-group">
                            <label for="exampleInputName2">添加暂存区文件</label>
                            <input  type="text" id="gitStatusAddFileId" class="form-control"  placeholder="暂存区文件">
                            <button type="button" onclick="gitStatusAddFile()" class="btn btn-info">添加暂存区</button>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputName2">版本库中文件</label>
                            <input  type="text" id="gitStatusRmFileId" class="form-control"  placeholder="库中文件">
                            <button type="button" onclick="gitStatusRmFile()" class="btn btn-info">返回版本库文件</button>
                        </div>

                   
                        
                    </form>
                </div>
            </div>



            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <label for="exampleInputName2">添加暂存区文件</label>
                            <input  type="text" id="gitAddFile" class="form-control"  placeholder="地址">
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">添加提交</label>
                            <input type="email" id="gitCommit" class="form-control"  placeholder="添加提交">
                        </div>

                        <button type="button" onclick="createGitCommit()" class="btn btn-info">生成Git命令</button>
                        <button type="button" onclick="updateGitCommit()" class="btn btn-warning">覆盖提交</button>
						<button type="button" onclick="createGitCommitAndPush()" class="btn btn-default">一键提交上传</button>
                        
                    </form>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <button type="button" onclick="createGitLog()" class="btn btn-default">查看历史</button>
                        </div>
                        <div class="form-group">
                            <label for="exampleInputEmail2">选择跳转的提交历史</label>
                            <input type="email" id="selectCommit" class="form-control"  placeholder="选择跳转的提交历史">
                        </div>

                        <button type="button" onclick="jumpGitCommit()" class="btn btn-default">跳转到指定提交</button>
                    </form>
                </div>
            </div>


            <div class="panel panel-default">
                <div class="panel-body">
                    <form class="form-inline">
                        <div class="form-group">
                            <button type="button" onclick="showAllBranch()" class="btn btn-default">查看所有分支</button>
                        </div>
                        <div class="form-group">
                            <input type="email" id="creatBranchName" class="form-control"  placeholder="新建分支名称">
                            <button type="button" onclick="gitCreatBranch()" class="btn btn-default">创建分支</button>
                        </div>
                        <div class="form-group">
                            <input type="email" id="checkoutGitBranchName" class="form-control"  placeholder="切换分支名称">
                            <button type="button" onclick="checkoutGitBranch()" class="btn btn-default">切换分支</button>
                        </div>

                        <div class="form-group">
                            <input type="email" id="mergeGitBranchName" class="form-control"  placeholder="合并分支名称">
                            <button type="button" onclick="mergeGitBranch()" class="btn btn-default">合并分支</button>
                        </div>

                    </form>
                </div>
            </div>


        </div>


        <div>
            <textarea id="mingling" class="form-control" rows="5"></textarea>
        </div>
    </div>

    <script>

      /**
       * 创建仓库
       */
      function gitInit(){
          var gitInitName=$('#gitInitName').val()



          var GitStr='git init'
          if(gitInitName!=""){
              GitStr+=' '+gitInitName
          }

          $('#mingling').val(GitStr)

      }

        /**
         * 生成克隆内容
         */
        function createGitClone(){
            var gitCloneAddress=$('#gitCloneAddress').val()
            var gitCloneBranch=$('#gitCloneBranch').val()
            var gitFileName=$('#gitFileName').val()


            var GitStr='git clone '
            if(gitCloneBranch!=""){
                GitStr+='-b '+gitCloneBranch+' '
            }
            GitStr+=gitCloneAddress

            if(gitFileName!=""){
                GitStr+=' '+gitFileName
            }
            $('#mingling').val(GitStr)

        }

        /**
         * git代码查看暂存区
         */
         function  showStatus(){
            var GitStr='git status'
            $('#mingling').val(GitStr)
        }


        /**
         * git代码添加暂存区
         */
         function  gitStatusAddFile(){
            var gitStatusAddFileName=$('#gitStatusAddFileId').val()
            var GitStr=''
            if (gitStatusAddFileName!=''){
                GitStr+='git add '+gitStatusAddFileName
            } else{
                GitStr+='git add .'
            }
            $('#mingling').val(GitStr)
        }

         /**
         * git代码暂存区返回版本库文件
         */
         function  gitStatusRmFile(){
            var gitStatusRmFile=$('#gitStatusRmFileId').val()
            var GitStr=''
            if (gitStatusRmFile!=''){
                GitStr+='git checkout '+gitStatusRmFile
            } else{
                GitStr+='git checkout .'
            }
            $('#mingling').val(GitStr)
        }
        /**
         * git代码提交
         */
        function  createGitCommit(){
            var gitAddFile=$('#gitAddFile').val()
            var gitCommit=$('#gitCommit').val()
            var GitStr=''
            if (gitAddFile!=''){
                GitStr+='git add '+gitAddFile
            } else{
                GitStr+='git add .'
            }
            GitStr+="\n"
            if (gitCommit!=''){
                GitStr+='git commit -m '+gitCommit
            }
            $('#mingling').val(GitStr)
        }


        /**
         * git覆盖代码提交
         */
         function  updateGitCommit(){
            var gitAddFile=$('#gitAddFile').val()
            var gitCommit=$('#gitCommit').val()
            var GitStr=''
            if (gitAddFile!=''){
                GitStr+='git add '+gitAddFile
            } else{
                GitStr+='git add .'
            }
            GitStr+="\n"
            if (gitCommit!=''){
                GitStr+='git commit --amend -m '+gitCommit
            }
            $('#mingling').val(GitStr)
        }
		 /**
         * git 一键提交命令
         */
		function createGitCommitAndPush(){
			var gitAddFile=$('#gitAddFile').val()
			var gitCommit=$('#gitCommit').val()
			if(gitCommit==''){
				alert('gitCommit不能为空');
				return false;
			}
			var GitStr=''

			if (gitAddFile!=''){
                GitStr+='git add '+gitAddFile
				GitStr+=' &&'+' git commit -m '+gitCommit
            } else{
                GitStr+='git commit -am '+gitCommit
            }
			GitStr+=' &&'+' git push'

            $('#mingling').val(GitStr)
		}

        /**
         * 查看 git日志
          */
        function createGitLog(){
            var GitStr='git log --oneline'
            $('#mingling').val(GitStr)
        }

        /**
         * 跳转到指定提交
         */
        function jumpGitCommit(){

            var GitStr='git reset --hard'
            var selectCommit=$('#selectCommit').val()

            if (selectCommit!=''){
                GitStr+=' '+selectCommit
            }
            $('#mingling').val(GitStr)
        }
        /**
         * 查看所有分支
         */
        function showAllBranch(){
            var GitStr='git branch'
            $('#mingling').val(GitStr)
        }
        /**
         * 创建分支
         */
        function gitCreatBranch(){
            var GitStr='git branch'
            var creatBranchName=$('#creatBranchName').val()

            if (creatBranchName!=''){
                GitStr+=' '+creatBranchName
            }
            $('#mingling').val(GitStr)
        }
        /**
         * 切换分支
         */
        function checkoutGitBranch(){
            var GitStr='git checkout'
            var checkoutGitBranchName=$('#checkoutGitBranchName').val()

            if (checkoutGitBranchName!=''){
                GitStr+=' '+checkoutGitBranchName
            }else{
                GitStr+=' master'
            }
            $('#mingling').val(GitStr)
        }
        /**
         * 合并分支
         */
        function mergeGitBranch(){
            var GitStr='git merge'
            var mergeGitBranchName=$('#mergeGitBranchName').val()

            if (mergeGitBranchName!=''){
                GitStr+=' '+mergeGitBranchName
            }
            $('#mingling').val(GitStr)
        }
    </script>
</body>
</html>
